<template>
  <div class="hrmw-table">
    <div class="hrmw-table-container">
      <div class="hrmw-table-box">
        <el-table
          ref="tables"
          v-loading="tableData.loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :empty-text="
            tableData.loadingText ? tableData.loadingText : '暂无数据'
          "
          :border="tableData.border || false"
          :data="tableData.data"
          :default-sort="tableData.defaultSort"
          :size="size ? size : 'medium'"
          :highlight-current-row="highlightCurrentRow"
          :row-class-name="tableRowClassName"
          :span-method="spanMethod"
          :reserve-selection="reserveSelection"
          :row-key="rowKey"
          :cell-class-name="cellClassName"
          :header-cell-class-name="headerCellClassName"
          :lazy="tableData.lazy || false"
          :tree-props="tableData.treeProps || {}"
          :height="height || 200"
          :load="
            (tree, treeNode, resolve) => {
              if (this.tableData.load) {
                this.load && this.load(tree, treeNode, resolve);
              }
            }
          "
          @sort-change="
            (sort) => {
              this.sortChange && this.sortChange(sort);
            }
          "
          @select="
            (selection, row) => {
              this.select && this.select(selection, row);
            }
          "
          @select-all="
            (selection) => {
              this.selectAll && this.selectAll(selection);
            }
          "
          @selection-change="
            (selection) => {
              this.selectionChange && this.selectionChange(selection);
            }
          "
          @row-click="
            (row, column, event) => {
              this.rowClick &&
                this.rowClick(row, column, event, this.$refs['tables']);
            }
          "
          @cell-click="
            (row, column, event) => {
              this.cellClick && this.cellClick(row, column, event);
            }
          "
          @row-dblclick="
            (row, column, event) => {
              this.rowDblclick && this.rowDblclick(row, column, event);
            }
          "
        >
          <template v-for="(item, index) in columns">
            <Column
              v-if="item.isShow == false ? false : true"
              :key="index"
              :column="item"
              :index="index"
              :filter-column="filterColumn"
            />
          </template>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        :current-page="tableData.currentPage || 1"
        :layout="tableData.layout ? tableData.layout : 'prev, pager, next'"
        :total="tableData.total"
        :page-size="tableData.pageSize ? tableData.pageSize : 10"
        @current-change="turnPage"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import Column from './Column'

export default {
// v-if="tableData.total > 0"
  name: 'Table',
  components: {
    Column
  },
  props: [
    'height',
    'tableData',
    'columns',
    'turnPage',
    'handleSizeChange',
    'highlightCurrentRow',
    'reserveSelection',
    'rowKey',
    'sortChange',
    'select',
    'selectAll',
    'selectionChange',
    'rowClick',
    'cellClick',
    'rowDblclick',
    'rowIndex',
    'rowSelectClass',
    'spanMethod',
    'load',
    'size',
    'customFilterChange'
  ],
  data() {
    return {
      filterColumn: ''
    }
  },
  mounted() {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (this.rowIndex == rowIndex) {
        return this.rowSelectClass
      } else {
        if (rowIndex % 2 == 1) {
          return 'evenNumberRow'
        }
      }
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === this.filterColumn) {
        if (rowIndex % 2 == 1) {
          return 'filter-class'
        } else {
          return 'filter-class-two'
        }
      } else {
        return ''
      }
    },
    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === this.filterColumn) {
        return 'header-filter-class'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss">
@import "./style.scss";
</style>
